import React, { Component,useState,useEffect } from 'react'
import servicePage from '../config/apiUrl'
//使用antd的24个横向布局
import '../static/style/components/header.css'
import {Row,Col,Button,Input,Modal,message} from 'antd'
import axios from 'axios'
import {
    ExclamationCircleOutlined,
  } from '@ant-design/icons';
import moment from 'moment'

const { TextArea } = Input;
function LeaveMassage(props){
    const [leaveMeassage,setLeaveMeassage] = useState('')
    const [nameChange,setNameChange] = useState('')
    const [meassageTime,setMeassageTime] = useState(moment().format('YYYYMMDDHHmmss'))
    const [articleId,setArticleId] = useState(0)
    const massageChangeCallback = e => {
        setArticleId(props.props)
        setLeaveMeassage(e.target.value)
    };

    const submitLeaveMassage = ()=>{
        if(!nameChange){alert('请输入您的名字')}
        else if(!leaveMeassage){alert('请输入您的留言之后在提交')}
        else {
            Modal.confirm({
            title: '提交留言请求',
            icon: <ExclamationCircleOutlined />,
            content: '确认要提交留言吗？',
            okText: '确认',
            cancelText: '取消',
            onOk(){
                document.getElementById(`leaveMessage`).value=''
                document.getElementById('leaveName').value=''
                let dataProps={}
                dataProps.articleId = articleId
                dataProps.name = nameChange
                dataProps.message = leaveMeassage
                dataProps.time = meassageTime
                dataProps.whether = 0
                console.log(dataProps)
                axios({
                    method:'post',
                    url:servicePage.addLeaveMassage,
                    data:dataProps,
                    withCredentials:true
                }).then(
                    res=>{
                        if(res.data.isSuccess){
                            message.success("添加留言成功")
                        }else{
                            message.error('添加留言失败')
                        }
                    }
                )
            }
          });
        }
    };

    const nameChangeCallback = e => {
        setNameChange(e.target.value)
    };
    return (
        <div>
        <Row gutter={5}>
          <Col span={24}>
            <TextArea id='leaveMessage' placeholder={'请输入您的留言～'} showCount maxLength={100} onChange={massageChangeCallback} />
          </Col>
          <Col span={12}>
              <Input  id='leaveName' addonBefore ={'请输入您的名字'} onChange = {nameChangeCallback} placeholder="我咋叫你～" />
          </Col>
          <Col span={4} offset={8}>
            <Button type="primary" onClick={submitLeaveMassage}>Submit</Button>
          </Col>
        </Row>
        </div>
    )

 }
 export default LeaveMassage